<template>
  <section>
    <h1>消息</h1>
  </section>
  <article>
    <card desc="无" title="聊天消息" thumb="https://p1.meituan.net/dpplatform/4cd3ee8475c290727d42fa73ac6a4b594095.png" />
    <card desc="暂无系统通知" title="系统通知" thumb="https://p0.meituan.net/dpplatform/e7ad9a3093607f2ea94c1b881022d1604141.png" />
    <card desc="暂无优惠促销" title="优惠促销" thumb="https://p0.meituan.net/dpplatform/5200758006a87390f8f6ff3f053193894206.png" />
  </article>
</template>
<script setup>
import { ref } from 'vue'
import { Card } from 'vant'
</script>
<style lang="scss">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
section {
  width: 100%;
  height: 8%;
  padding: 1rem;
}
article {
  width: 100%;
  height: 92%;
  overflow: hidden;
  background: linear-gradient(0deg, #ffffff, #deeef4);
  .van-card {
    height: 5rem;
    margin-top: 0.3rem;
  }
  .van-card__thumb {
    width: 3.125rem;
    height: 3.125rem;
  }
  .van-card__header {
    align-items: center;
    height: 100%;
    .van-card__content {
      justify-content: space-around;
    }
  }
}
</style>
